<template>
	<view class="lottery-game">
		<view class="lottery-game__pan">
			<view :class="animateClass"></view>
			<view :class="zhuan" @click="handlePlay">
			</view>
		</view>
	</view>
</template>

<script>
	import {
		startGetPrizeMsg
	} from "../../api/index.js"
	export default {
		data() {
			return {
				isDrawed: false,
				isLoading: false,
				giftIndex: 0
			}
		},
		props: {
			isDrawing: {
				type: Boolean,
				default: true,
			},
			lotteryNums: {
				type: Number,
				default: 0
			},
			lotteryType: {
				type: String,
				default: "dzp",
			},
			pmType: {
				type: String,
				default: "day",
			}
		},
		computed: {
			animateClass() {
				let name = ''
				if (this.lotteryType != 'pm') {
					if (this.isDrawed) {
						//name = `lottery-game__back_${this.lotteryType} is-result${this.giftIndex}`
						name = `lottery-game__back_${this.lotteryType}`
					} else if (this.isDrawing) {
						//name = `lottery-game__back_lottery_${this.lotteryType} is-wr`
						name = `lottery-game__back_${this.lotteryType}`
					} else {
						name = `lottery-game__back_${this.lotteryType}`
					}
					return name
				} else {
					if (this.isDrawed) {
						//name = `lottery-game__back_${this.lotteryType}_${this.pmType} is-result${this.giftIndex}`
						name = `lottery-game__back_${this.lotteryType}_${this.pmType}`
					} else if (this.isDrawing) {
						//name = `lottery-game__back_lottery_${this.lotteryType}_${this.pmType} is-wr`
						name = `lottery-game__back_${this.lotteryType}_${this.pmType}`
					} else {
						name = `lottery-game__back_${this.lotteryType}_${this.pmType}`
					}
					return name
				}
			},
			zhuan() {
				if (this.lotteryType == 'pm') {
					return `lottery-game__pointer_${this.lotteryType}_${this.pmType}`
				} else {
					return `lottery-game__pointer_${this.lotteryType}`
				}

			}
		},
		methods: {
			init() {
				this.isDrawed = false
			},
			handlePlay() {
				if (!this.isLoading) {
					this.isLoading = true
					this.$emit('play')
				}
			},
			showPlay(num) {
				this.isDrawed = true
				this.isLoading = false
				this.giftIndex = num
			}
		}
	}
</script>

<style lang="less" scoped>
	.lottery-game {
		position: relative;
		margin: 0 0 10px;

		.lottery-game__pan {
			position: relative;
			width: 90vw;
			height: 90vw;
			margin: 0 auto;
			overflow: hidden;

			.lottery-game__back_dzp {
				position: relative;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-dzp-center.png') center center no-repeat;
				transform: rotate(calc(5 * 360deg + 360deg / 8 * 3));
				background-size: cover;
			}

			.lottery-game__back_lottery_dzp {
				position: relative;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-dzp-center.png') center center no-repeat;
				background-size: cover;
			}

			.lottery-game__back_pm {
				position: relative;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-pm-center.png') center center no-repeat;
				transform: rotate(calc(5 * 360deg + 360deg / 8 * 3));
				background-size: cover;
			}

			.lottery-game__back_lottery_pm {
				position: relative;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-pm-center.png') center center no-repeat;
				background-size: cover;
			}

			.lottery-game__back_pm_day {
				position: relative;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-pm-center-day.png') center center no-repeat;
				transform: rotate(calc(5 * 360deg + 360deg / 8 * 3));
				background-size: cover;
			}

			.lottery-game__back_lottery_pm_day {
				position: relative;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-pm-center-day.png') center center no-repeat;
				background-size: cover;
			}

			.lottery-game__back_pm_week {
				position: relative;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-pm-center-week.png') center center no-repeat;
				transform: rotate(calc(5 * 360deg + 360deg / 8 * 3));
				background-size: cover;
			}

			.lottery-game__back_lottery_pm_week {
				position: relative;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-pm-center-week.png') center center no-repeat;
				background-size: cover;
			}

			.lottery-game__back_pm_month {
				position: relative;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-pm-center-month.png') center center no-repeat;
				transform: rotate(calc(5 * 360deg + 360deg / 8 * 3));
				background-size: cover;
			}

			.lottery-game__back_lottery_pm_month {
				position: relative;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-pm-center-month.png') center center no-repeat;
				background-size: cover;
			}

			.lottery-game__back_pm_season {
				position: relative;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-pm-center-season.png') center center no-repeat;
				transform: rotate(calc(5 * 360deg + 360deg / 8 * 3));
				background-size: cover;
			}

			.lottery-game__back_lottery_pm_season {
				position: relative;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-pm-center-season.png') center center no-repeat;
				background-size: cover;
			}

			.lottery-game__back_pm_year {
				position: relative;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-pm-center-year.png') center center no-repeat;
				transform: rotate(calc(5 * 360deg + 360deg / 8 * 3));
				background-size: cover;
			}

			.lottery-game__back_lottery_pm_year {
				position: relative;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-pm-center-year.png') center center no-repeat;
				background-size: cover;
			}

			.lottery-game__back_sj {
				position: relative;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-sj-center.png') center center no-repeat;
				transform: rotate(calc(5 * 360deg + 360deg / 8 * 3));
				background-size: cover;
			}

			.lottery-game__back_lottery_sj {
				position: relative;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-sj-center.png') center center no-repeat;
				background-size: cover;
			}

			.lottery-game__pointer_dzp {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 5;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-zhuan.png') center center no-repeat;
				background-size: cover;

				&.is-disabled {
					pointer-events: none;
				}
			}

			.lottery-game__pointer_sj {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 5;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-4.png') center center no-repeat;
				background-size: cover;

				&.is-disabled {
					pointer-events: none;
				}
			}

			.lottery-game__pointer_pm {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 5;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/lottery-4.png') center center no-repeat;
				background-size: cover;

				&.is-disabled {
					pointer-events: none;
				}
			}

			.lottery-game__pointer_pm_day {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 5;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/pm_day.png') center center no-repeat;
				background-size: cover;

				&.is-disabled {
					pointer-events: none;
				}
			}

			.lottery-game__pointer_pm_week {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 5;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/pm_week.png') center center no-repeat;
				background-size: cover;

				&.is-disabled {
					pointer-events: none;
				}
			}

			.lottery-game__pointer_pm_month {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 5;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/pm_month.png') center center no-repeat;
				background-size: cover;

				&.is-disabled {
					pointer-events: none;
				}
			}

			.lottery-game__pointer_pm_season {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 5;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/pm_season.png') center center no-repeat;
				background-size: cover;

				&.is-disabled {
					pointer-events: none;
				}
			}

			.lottery-game__pointer_pm_year {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 5;
				width: 100%;
				padding: 0 0 100%;
				background: url('https://wx.2024csnl.com/static/lottery/pm_year.png') center center no-repeat;
				background-size: cover;

				&.is-disabled {
					pointer-events: none;
				}
			}
		}
	}

	/*
	* 下面的css样式为每个奖品的旋转动画，这里写了对应8个奖品的动画，如果想要更多的话，可以添加
	* 例如： .is-wr8  @keyframes play8
	*/
	.is-wr {
		animation-duration: 5s;
		animation-timing-function: linear;
		animation-fill-mode: both;
		animation-iteration-count: infinite;
		animation-name: play7;
	}

	.is-result0,
	.is-result1,
	.is-result2,
	.is-result3,
	.is-result4,
	.is-result5,
	.is-result6,
	.is-result7 {
		animation-duration: 5s;
		animation-timing-function: ease;
		animation-fill-mode: both;
		animation-iteration-count: 1;
	}

	.is-result0 {
		animation-name: play0;
	}

	.is-result1 {
		animation-name: play1;
	}

	.is-result2 {
		animation-name: play2;
	}

	.is-result3 {
		animation-name: play3;
	}

	.is-result4 {
		animation-name: play4;
	}

	.is-result5 {
		animation-name: play5;
	}

	.is-result6 {
		animation-name: play6;
	}

	.is-result7 {
		animation-name: play7;
	}


	@keyframes play0 {
		to {
			transform: rotate(calc(5 * 360deg + 360deg / 8 * 2));
		}
	}

	@keyframes play1 {
		to {
			transform: rotate(calc(5 * 360deg + 360deg / 8 * 1));
		}
	}

	@keyframes play2 {
		to {
			transform: rotate(calc(5 * 360deg + 360deg / 8 * 0));
		}
	}

	@keyframes play3 {
		to {
			transform: rotate(calc(5 * 360deg + 360deg / 8 * 7));
		}
	}

	@keyframes play4 {
		to {
			transform: rotate(calc(5 * 360deg + 360deg / 8 * 6));
		}
	}

	@keyframes play5 {
		to {
			transform: rotate(calc(5 * 360deg + 360deg / 8 * 5));
		}
	}

	@keyframes play6 {
		to {
			transform: rotate(calc(5 * 360deg + 360deg / 8 * 4));
		}
	}

	@keyframes play7 {
		to {
			transform: rotate(calc(5 * 360deg + 360deg / 8 * 3));
		}
	}
</style>